<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>书途</title>
	<link rel="stylesheet" href="semantic.min.css">
	<link rel="stylesheet" href="main.css">
	<script src="jquery.min.js"></script>
	<script type="text/javascript" src="semantic.min.js"></script>
	  	<script>
		  	$(document)
			    .ready(function() {
					// fix main menu to page on passing
					$('.main.menu').visibility({
						type: 'fixed'
					});
					$('.overlay').visibility({
						type: 'fixed',
						offset: 80
					});

					$('.ui.rating')
					  .rating()
					;
					$('#signin').click(function(){
						$('#signinDialog')
							.modal({blurring: true})
							.modal('show');;
					});
			    })
		  ;
		</script>
</head>
<body>
	<div class="ui borderless main menu">
    <div class="ui text container">
      <div class="header item">
		<a href="/"><img class="logo" src="shutu_logo.png"></a>
      </div>
      <a href="#" class="item">大家的分享</a>
      <a href="#" class="item">我要分享</a>
      <a href="#" class="ui right floated item">
        关于书途
      </a>
      <a id="signin" href="#" class="item">
        登录
      </a>
    </div>
  </div>
  	<div class="contents">
	  	<div class="ui divided grid">
			<div id="leftBar" class="twelve wide column">

				<div class="ui divided items" >
				  <div class="item" >
				    <div class="ui tiny  image">
				      <img src="lcw.jpg">
				    </div>
				    <div class=" content">
				      <a class="header">哈利波特</a>
				      <div class="meta">
				        <span class="author">J.K. Rowling</span>|

				        <span class="price">$50</span>|
				        
				      </div>
				      <div class="description">
				        <p></p>
				      </div>
				      <div class="extra">
				        <div class="ui label">IMAX</div>
				        <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
				      </div>
				    </div>
				  </div>
				  <div class="item">
				    <div class="ui tiny image">
				      <img src="s28358339.jpg"><br/>
					  <div class="book_site">上海<br/>浦东新区张江</div>
				    </div>
				    
				    <div class="content">
				      <a class="header">从零开始做运营</a> 
				      <image style= "width:15px" src="douban.jpg"/> 9.0
				      <div class="ui right floated ">
					      <a href="">
					      	<img class="ui avatar image" src="avatar.jpg">
						  	<a class="link-people">梁朝伟</a>
					      </a>
					      <span style="font-size: 0.8em">分享于2016年1月6日</span>
					    </div>
				      	
				      	<!--<div ><a target="_blank" href="http://book.douban.com/subject/26682111">查看本书在豆瓣上的详细信息</a></div>-->
				      
				      
				      <div class="meta">
				        
				        <span class="cinema">作者:张亮</span>|
				        <span class="cinema">出版社:中信出版社</span>|
				        <span class="price">价格:49.00元</span>
						
				      </div>
				      <div class="book_intro">
				        <p>运营是什么？怎样做运营？产品和运营是什么关系？我是否适合从事互联网运营？为什么我做的运营活动收效甚微？
							在互联网大热的今天，互联网运营成为一个越来越重要的岗位，事关网站、产品的发展与存亡。很多年轻人带着对互联网的热情投</p>
				      </div>
				      <div class="extra">
				        
				        <div class="ui mini label">互联网运营</div>
				        <div class="ui mini label">互联网</div>
				        
				      </div>
				      <div>
				      	
				      	<div class="ui right floated teal button">我要借</div>
				      </div>
				    </div>
				  </div>
				  <div class="item">
				    <div class="ui tiny image">
				      <img src="lcw.jpg">
				    </div>
				    <div class="content">
				      <a class="header">Watchmen</a>
				      <div class="meta">
				        <span class="cinema">IFC</span>
				      </div>
				      <div class="description">
				        <p></p>
				      </div>
				      <div class="extra">
				        <div class="ui right floated primary button">Buy tickets <i class="right chevron icon"></i> </div>
				      </div>
				    </div>
				  </div>
				</div>

			</div>

			<div id="rightBar"  class="four wide column">
				<div class="ui segment" style="background-color: red">4</div>
			</div>

			<div id="signinDialog" class="ui small modal">
			    <i class="close icon"></i>
			    <div class="ui teal header" >
			      登录书途
			    </div>
			    <br/>
			    <div class="ui two column stackable grid">
			    	<div class="one wide column"></div>
				  	<div class="seven wide column">
						<div class="ui form">
					      <div class="field">
					        <div class="ui left icon input">
					          <input type="text" placeholder="邮箱">
					          <i class="mail icon"></i>
					        </div>
					      </div>
					      <div class="field">

					        <div class="ui left icon input">
					          <input type="password" placeholder="密码">
					          <i class="lock icon"></i>
					        </div>
					      </div>
					      <div class="ui blue submit button">Login</div>
					    </div>
					</div>
					<div class="one wide column">
						<div class="ui vertical divider">or？</div>
					</div>
					
					<div class="seven wide column">
						asaas
					</div>

				</div>
				<br/><br/><br/>
			</div>
		</div>
	</div>

		
  <!--
	<div id="Wrapper">
		<div class="content">
			<div id="leftBar"></div>
			<div id="rightBar"></div>
		</div>
		<div class="side"></div>
	</div>
	<footer></footer>
	-->
</body>
</html>